<template>
  <div class="wrapper d-flex flex-column">
    <section id="app" class="content">
      <div class="w">
        <!-- 此处为推荐页，内容主要包括两个部分：歌单介绍和歌单列表 -->
        <div class="recommend-header">
          <router-link to="/">首页</router-link>/
          <span>推荐歌单页</span>
        </div>
        <div class="recommend-wrapper">
          <!-- 此处为推荐页，内容主要包括两个部分：歌单介绍和歌单列表 -->
          <div class="recommend-describe d-flex justify-content-start">
            <!-- 歌单介绍 -->
            <div class="recommend-describe-left">
              <img :src="recommendDetail.coverImgUrl" alt="" />
            </div>
            <div
              class="recommend-describe-right d-flex flex-column align-items-start"
            >
              <h4 class="recommend-describe-right-title single-text-omitted">
                {{ recommendDetail.name }}
              </h4>
              <div class="recommend-describe-right-creator d-flex">
                <img class="avatar" :src="imgCreator" alt="" />
                <span class="creator">{{ creator }}</span>
                <span class="create-time">{{
                  formatCreateTime(recommendDetail.createTime)
                }}</span>
              </div>
              <div
                class="recommend-describe-right-add d-flex"
                @click.once="addAll"
              >
                <span class="btn">播放全部</span><span class="add">+</span>
              </div>
              <div class="recommend-describe-right-info">
                <div class="info">
                  <span class="label">标签：</span>
                  <span
                    class="tag"
                    v-for="(la, index) in recommendDetail.tags"
                    :key="index"
                    >{{ la }}/</span
                  >
                </div>
                <div class="info">
                  <span class="label">歌曲：</span>
                  <span class="label-info">{{
                    recommendDetail.trackCount
                  }}</span>
                  <span class="label">播放：</span>
                  <span class="label-info">{{
                    recommendDetail.playCount
                  }}</span>
                </div>
                <div class="info">
                  <span class="label">简介：</span>
                  <span class="label-info">{{
                    recommendDetail.description
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="recommend-list">
            <!-- 歌单列表  -->
            <h4 class="recommend-list-title">歌曲列表</h4>
            <!-- 表格头部 -->
            <ul
              class="recommend-list-songlist-header d-flex justify-content-start"
            >
              <li class="songlist-header-name">歌曲</li>
              <li class="songlist-header-author">歌手</li>
              <li class="songlist-header-album">专辑</li>
              <li class="songlist-header-time">时长</li>
            </ul>
            <!-- 表格内容 -->
            <ul class="recommend-list-songlist-body">
              <li
                class="songlist-item odd d-flex justify-content-start"
                v-for="(song, index) in recommendSonglist"
                :key="index"
                @dblclick="playMusic(song.id, index)"
              >
                <div class="songlist-number font-color">
                  <span class="index">{{ index + 1 }}</span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                  </svg>
                </div>
                <div class="songlist-songname">{{ song.name }}</div>
                <div class="songlist-artist font-color">
                  {{ song.ar[0].name }}
                </div>
                <div class="songlist-album font-color">{{ song.al.name }}</div>
                <div class="songlist-time font-color">
                  {{ Math.floor(song.dt / 1000 / 60) }}:{{
                    Math.round((song.dt / 1000) % 60)
                  }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getPlaylist } from "@/api/api.js";
import { mapMutations } from "vuex";
export default {
  name: "RcommendList",
  data() {
    return {
      recommendDetail: "",
      recommendSonglist: "",
    };
  },
  computed: {
    imgCreator() {
      if (this.recommendDetail.hasOwnProperty("creator")) {
        //console.log(this.recommendDetail.creator.avatarUrl,'aaaaa');
        return this.recommendDetail.creator.avatarUrl;
      }
    },
    creator() {
      if (this.recommendDetail.hasOwnProperty("creator")) {
        return this.recommendDetail.creator.detailDescription;
      }
    },
  },
  methods: {
    ...mapMutations([
      "CHANGEMUSIC",
      "STARTMUSIC",
      "MUSICID",
      "INDEX",
      "RECOMMENDID",
      "ISRE",
      "RECOMMENDSONGLIST",
    ]),
    // 将歌单信息加入到播放列表
    addAll() {
      console.log(this.$store.state.recommendSonglist);
      this.$store.commit("ADDALL", this.$store.state.recommendSonglist);
    },
    formatCreateTime(time) {
      let now = new Date(time);
      let year = now.getFullYear();
      let month = now.getMonth();
      let day = now.getDay();
      return `${year}-${month}-${day}`;
    },
    playMusic(musicId, index) {
      this.$store.dispatch("getMusic", musicId);
      this.CHANGEMUSIC(
        `https://music.163.com/song/media/outer/url?id=${musicId}`
      );
      this.STARTMUSIC(true);
      this.INDEX(index);
    },
  },

  mounted() {
    // 将推荐歌单id上传
    this.RECOMMENDID(this.$route.query.id);
    this.ISRE(true);
    getPlaylist(this.$route.query.id).then(
      (response) => {
        this.recommendDetail = response.data.playlist; //歌单信息
        this.recommendSonglist = response.data.playlist.tracks; //歌曲
        this.RECOMMENDSONGLIST(this.recommendSonglist);
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
};
</script>
<style>
.recommend-header {
  margin: 5px 10px;
}

.recommend-header a {
  padding: 5px 2px;
  cursor: pointer;
}

.recommend-header span {
  padding: 5px 2px;
  color: rgb(52, 99, 252);
}

/* common.css */
a {
  text-decoration: none;
  color: #000;
}

.recommend-header {
  margin: 5px;
  margin-bottom: 10px;
}

.recommend-header a {
  padding: 5px 2px;
  cursor: pointer;
}

.recommend-header span {
  padding: 5px 2px;
  color: rgb(52, 99, 252);
}

.recommend-describe {
  margin: 5px;
}

.recommend-describe-left {
  width: 20%;
  border-radius: 15px;

  margin-right: 15px;
}

.recommend-describe-left img {
  height: 150px;
  width: 150px;
  border-radius: 10px;
}

.recommend-describe-right {
  flex-grow: 1;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommend-describe-right-title {
  font-weight: 700;
  font-size: 20px;
  margin: 5px 0;
}

.recommend-describe-right-creator {
  margin: 5px 0;
}

.recommend-describe-right-creator .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}

.recommend-describe-right-creator .creator {
  font-size: 12px;
  color: #507daf;
  margin-right: 10px;
}

.recommend-describe-right-creator .create-time {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.recommend-describe-right-add {
  margin: 5px 0;
  height: 30px;
  line-height: 30px;
}

.recommend-describe-right-add span {
  background-color: #2bb669;
  color: #fff;
  cursor: pointer;
}

.recommend-describe-right-add .btn {
  font-size: 14px;
  padding-left: 20px;
  padding-right: 10px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.recommend-describe-right-add .add {
  font-size: 20px;
  padding-left: 10px;
  padding-right: 12px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.recommend-describe-right-info {
  margin-top: 5px;
}

.recommend-describe-right-info .info {
  margin: 5px 0;
  font-size: 12px;
}

.recommend-describe-right-info .info .label {
  color: #666;
}

.recommend-describe-right-info .info .tag {
  color: #507daf;
}

.recommend-describe-right-info .info .label-info {
  color: #666;
  margin-right: 8px;
}

.recommend-list {
  margin-top: 10px;
}

.recommend-list-title {
  font-weight: bold;
}

.recommend-list-songlist-header {
  width: 100%;
  margin: 10px 0;
  color: #666;
  padding: 10px 0;
}

.songlist-header-name {
  margin-left: 15%;
  width: 35%;
}

.songlist-item .songlist-number {
  text-align: center;
  width: 15%;
}

.songlist-item .songlist-songname {
  width: 35%;
}

.songlist-header-author,
.songlist-item .songlist-artist {
  width: 15%;
}

.songlist-header-album,
.songlist-item .songlist-album {
  width: 20%;
}

.songlist-header-time,
.songlist-item .songlist-time {
  width: 15%;
}

.songlist-item {
  padding: 10px 0;
}

.songlist-item .font-color {
  color: #666;
}

.recommend-list-songlist-body {
  margin-bottom: 10px;
  max-height: 300px;
  overflow: auto;
}

.recommend-list-songlist-body .odd {
  background-color: #e6e6e6;
}

.recommend-list-songlist-body .even {
  background-color: #e9e9e9;
}

.recommend-list-songlist-body .odd:hover,
.recommend-list-songlist-body .even:hover {
  background-color: #f6f6f6;
}
</style>
